<template>
  <div class="novel-container">
    <div class="novel-list-box">
      <div v-if="novelList.length > 0" class="novel-list">
        <div v-for="item in novelList" :key="`${item.id}`" class="novel-item" @click="selectNovel(item)">
          <div class="novel-image">TXT</div>
          <div class="novel-name">{{ item.cnName }}</div>
        </div>
      </div>
      <div v-else class="none-novel">
        <div class="none-msg">暂无小说</div>
      </div>
    </div>
  </div>
</template>

<!-- 安装vite-plugin-vue-setup-extend插件让<script setup>标签</script>可以直接自定义组件名 -->
<script setup lang="ts" name="ReadNovel">
import { ElMessage } from "element-plus"
// import { useRouter } from "vue-router"
import { queryNovelList, queryNovelChapter } from "@/apis/novel"
// 接口是一种约束（规范），不是值，在导入时要在前面加上type
import { type NovelList, type NovelInter } from "@/types/novel"

const router = useRouter()

const novelList = ref<NovelList>([])
const novelContent = ref<string>("")

const selectNovel = (novelItem: NovelInter) => {
  const { name, cnName } = novelItem
  router.push({
    name: `novelContent`,
    params: {
      novelName: name,
      novelCnName: cnName,
    },
  })
}

const getNovelList = async () => {
  try {
    const res = await queryNovelList()
    console.log("查询所有小说：", res)
    novelList.value = res.data
  } catch (error) {
    console.error("查询所有小说出错：", error)
    ElMessage.error("查询所有小说出错")
  }
}
const getNovelChapter = async (novelName: string) => {
  try {
    const params = { novelName, chapterNum: 1 }
    const res = await queryNovelChapter(params)
    console.log("查询小说章节内容：", res)
    novelContent.value = res.data
  } catch (error) {
    console.error("查询小说章节内容出错：", error)
    ElMessage.error("查询小说章节内容出错")
  }
}
getNovelList()
</script>

<style lang="scss" scoped>
.novel-container {
  width: 100%;
  height: 100vh;
  .novel-list-box {
    .novel-list {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      box-sizing: border-box;
      .novel-item {
        width: 200px;
        border: 1px solid #cccccc;
        border-radius: 8px;
        cursor: pointer;

        .novel-image {
          width: 100%;
          height: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(200, 200, 200, 0.5);
          color: yellowgreen;
          font-size: 20px;
          font-weight: 600;
        }
        .novel-name {
          width: 100%;
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10px;
          box-sizing: border-box;
        }
      }
      & > .novel-item:not(:first-child) {
        margin-left: 10px;
      }
      & > .novel-item:hover {
        background-color: rgba(200, 200, 200, 0.5);
      }
    }
    .none-novel {
      padding: 20px;
      box-sizing: border-box;
      .none-msg {
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #cccccc;
        border-radius: 8px;
        text-align: center;
      }
    }
  }
}
</style>
